<template>
  <div class="emotional-map-body" style="zoom: 80%;">
    <div class="breadcrumb-content">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">运营</el-breadcrumb-item>
        <el-breadcrumb-item>情绪体验地图</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="emotional-content">
       <div class="header-control-bar">
        <div class="header-control-row">
          <div class="header-control-row-left">
            <div class="header-control-row-title">
              <span>体验历程</span>
            </div>
            <div class="header-control-detail-tabs">
              <a v-bind:class="{ active: isActive }" @click="changeTabs('personal')">个人</a>
              <a v-bind:class="{ active: !isActive }" @click="changeTabs('others')">客群</a>
            </div>
          </div>
          <div class="header-control-row-detail">
            <div class="header-control-detail-search-bar">
              <div class="header-control-detail-item">
                <span>地州:</span>
                <el-select v-model="address" placeholder="全省" style="margin-left: 20px;" size="medium">
                  <el-option v-for="item in options" :key="item" :label="item" :value="item">
                  </el-option>
                </el-select>
                <el-select v-model="years" placeholder="年" style="margin-left: 20px;" size="medium">
                  <el-option v-for="item in optionsA" :key="item" :label="item" :value="item">
                  </el-option>
                </el-select>
                <el-select v-model="time" placeholder="2022" style="margin-left: 20px;" size="medium">
                  <el-option v-for="item in optionsB" :key="item" :label="item" :value="item">
                  </el-option>
                </el-select>
              </div>
              <div class="header-control-detail-item">
                <el-input v-model="phone" placeholder="输入您要查询的手机号码" style="width: 230px;" size="medium"></el-input>
              </div>
              <div class="header-control-detail-item">
                <el-button type="primary" size="medium">搜索</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="emotional-row">
        <personal-page v-show="isActive"></personal-page>
        <others-page v-show="!isActive"></others-page>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import PersonalPage from '@/components/emotional/personal-page.vue';
import OthersPage from '@/components/emotional/others-page.vue';

@Component({
  components: {
    'personal-page': PersonalPage,
    'others-page': OthersPage
  }
})
export default class Home extends Vue {
  address = '';
  years = '';
  time = '';
  options = ['昆明', '红河', '丽江', '迪庆', '大理'];
  optionsA = ['年', '月', '日'];
  optionsB = ['2022', '2021', '2020', '2019', '2018'];
  phone = '';
  isActive = true;

  changeTabs(type:string): void {
    this.isActive = type === 'personal';
  }
}
</script>
